<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>天气数据分析可视化</title>
    <meta content="Responsive admin theme build on top of Bootstrap 4" name="description">

    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!--Morris Chart CSS -->

    <link href="/static/static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- DataTables -->
    <link href="/static/static/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <!-- Responsive datatable examples -->
    <link href="/static/static/css/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css">

    <link href="/static/static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/metismenu.min.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="/static/static/css/style.css" rel="stylesheet" type="text/css">

</head>

<body>

<div class="header-bg">
    <!-- Navigation Bar-->
    <header id="topnav">
        <div class="topbar-main" style="background-color: #1D84DE">
            <div class="container-fluid">

                <!-- Logo-->
                <div>
                    <a href="" class="logo" style="display: flex;margin-top: 10px">
                        <img src="../static/static/weathericon/方块.png" style="width: 40px; height: 40px;margin-top: 5px;margin-right: 5px">
                        <h3 style="color: white">天气数据分析可视化</h3>
                    </a>
                </div>
                <!-- End Logo-->

                <div class="menu-extras topbar-custom navbar p-0">

                    <!-- Search input -->
                    <div class="search-wrap" id="search-wrap">
                        <div class="search-bar">
                            <input class="search-input" type="search" placeholder="Search">
                            <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                                <i class="mdi mdi-close-circle"></i>
                            </a>
                        </div>
                    </div>

                    <ul class="navbar-right ml-auto list-inline float-right mb-0">
                        

                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <i class="fas fa-expand noti-icon" style="color: white"></i>
                            </a>
                        </li>
                        <li class="dropdown notification-list list-inline-item d-none d-md-inline-block">
                            <a class="nav-link waves-effect" href="#" id="btn-fullscreen">
                                <h5 style="color: #fff">
                                    {{ userInfo.username }}
                                </h5>
                            </a>
                        </li>
                        <!-- notification -->


                        <li class="dropdown notification-list list-inline-item">
                             <!-- User profile dropdown -->
                            <div class="dropdown notification-list nav-pro-img">
                                <a class="dropdown-toggle nav-link arrow-none waves-effect nav-user"
                                   data-toggle="dropdown" href="#" role="button" aria-haspopup="false"
                                   aria-expanded="false">
                                    <img src="/static/static/picture/user-1.jpg" alt="user" class="rounded-circle">
                                </a>
                                <div class="dropdown-menu dropdown-menu-right dropdown-menu-animated profile-dropdown">
                                   
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/logOut"><i
                                            class="mdi mdi-power"></i> 退出登录</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item " href="/userApp/userinfo"><i
                                            class="ion-ios-add-circle-outline"></i> 个人信息</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="/userApp/pwdchange"><i
                                            class="ion-ios-trophy"></i> 密码修改</a>
                                </div>
                            </div>
                        </li>

                        <li class="menu-item dropdown notification-list list-inline-item">
                            <!-- Mobile menu toggle-->
                            <a class="navbar-toggle nav-link">
                                <div class="lines">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </a>
                            <!-- End mobile menu toggle-->
                        </li>

                    </ul>

                </div>
                <!-- end menu-extras -->

                <div class="clearfix"></div>

            </div>
            <!-- end container -->
        </div>
        <!-- end topbar-main -->
    

        <!-- MENU Start -->
         <div class="navbar-custom">
            <div class="container-fluid">

                <div id="navigation">

                    <!-- Navigation Menu-->
                    <ul class="navigation-menu">

                        <li class="has-submenu">
                            <a href="/userApp/index"><i class="dripicons-home"></i> 首页</a>
                        </li>
                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-thumb"></i> 城市数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/CityData">年度分析</a></li>
                                <li><a href="/userApp/CityMonth">月份分析</a></li>
                            </ul>

                        </li>


                        <li class="has-submenu">
                            <a href="#"><i class="dripicons-view-list"></i> 全国数据分析</a>
                            <ul class="submenu">
                                <li><a href="/userApp/monthTempChar">月温度分析</a></li>
                                <li><a href="/userApp/monthAirCha">月份空气质量</a></li>

                            </ul>

                        </li>
                        <li class="has-submenu">
                            <a href="/userApp/screen?user=true"><i class="dripicons-map"></i> 历史数据大屏</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/chatAI"><i class="dripicons-network-2"></i> 智能问答</a>
                        </li>

                        <li class="has-submenu">
                            <a href="/userApp/weather_deatil_view"><i class="dripicons-view-thumb"></i> 详情信息</a>

                        </li>


                        <li class="has-submenu">
                            <a href="/userApp/weatherforecast/"><i class=" dripicons-star"></i>天气预测</a>
                        </li>
                    </ul>
                    <!-- End navigation menu -->
                </div>
                <!-- end #navigation -->
            </div>
            <!-- end container -->
        </div>
    </header>
    

</div>
<!-- header-bg -->

<div class="wrapper" style="padding-top: 30px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row">
                            <label for="" class="col-sm-1 col-form-label">月份选择:</label>
                            <div class="col-sm-11">
{#                                <div>{{ dates }}</div>#}
                                <select onchange="change(event)" name="month_select" id="month_select" class="form-control">
                                    {% for date in dates %}
                                        <option value="{{ date}}">{{ date}}</option>
                                    {% endfor %}
                                </select>
                            </div>

                        </div>
                    
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="mt-0 header-title">气温统计</h4>
                        <div id="mainOne" style="height: 500px;width: 100%"></div>
                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">

                        <h4 class="mt-0 header-title">极端天气统计</h4>
                        
                        <div id="mainTwo" style="height: 600px;width: 100%">
                            <div id="extremeHighChart" style="height: 300px;width: 100%"></div>
                            <div id="extremeLowChart" style="height: 300px;width: 100%"></div>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>
    </div>

    <!-- end container-fluid -->
</div>
<!-- end wrapper -->


<style>
    .swiper {
        width: 100%;
        height: calc(100vh - 131px);
    }

    .swiper-slide {
        height: 100%;
    }

    .wrapper {
        padding-top: 0;
    }


    body {
        padding-bottom: 0;
    }
    html {
    
    }
</style>
<!-- End Footer -->

<!-- jQuery  -->
<script src="/static/static/js/jquery.min.js"></script>
<script src="/static/static/js/bootstrap.bundle.min.js"></script>
<script src="/static/static/js/jquery.slimscroll.js"></script>
<script src="/static/static/js/waves.min.js"></script>

<script src="/static/static/js/apexcharts.min.js"></script>
<script src="/static/static/js/bootstrap-datepicker.min.js"></script>

<!-- Required datatable js -->

<script src="/static/static/js/jquery.dataTables.min.js"></script>
<script src="/static/static/js/dataTables.bootstrap4.min.js"></script>
<!-- Buttons examples -->
<script src="/static/static/js/dataTables.buttons.min.js"></script>
<script src="/static/static/js/buttons.bootstrap4.min.js"></script>
<script src="/static/static/js/jszip.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/pdfmake.min.js"></script>
<script src="https://themesdesign.in/zegva/layouts/plugins/datatables/vfs_fonts.js"></script>
<script src="/static/static/js/buttons.html5.min.js"></script>
<script src="/static/static/js/buttons.print.min.js"></script>
<script src="/static/static/js/buttons.colVis.min.js"></script>
<!-- Responsive examples -->
<script src="/static/static/js/dataTables.responsive.min.js"></script>
<script src="/static/static/js/responsive.bootstrap4.min.js"></script>

<!-- Datatable init js -->

<script src="/static/static/js/datatables.init.js"></script>
<script src="/static/static/js/echarts.js"></script>
<!-- App js -->
<script src="/static/static/js/app.js"></script>
<script>
    const defaultMonth = "{{ dates.0 }}";
    let currentMonth = defaultMonth;

    const chartOne = echarts.init(document.getElementById('mainOne'));
    const chartTwo = echarts.init(document.getElementById('extremeHighChart'));
    const chartThree = echarts.init(document.getElementById('extremeLowChart'));

    fetchData(defaultMonth);

    async function fetchData(selectedMonth) {
        try {
            const response = await fetch(`/userApp/get_month_data?month=${selectedMonth}`);
            const data = await response.json();
            updateCharts(data,selectedMonth);
        } catch (error) {
            console.error("Error fetching data:", error);
        }
    }

    function change(event) {
            const selectedMonth = event.target.value;
            currentMonth = selectedMonth;
            fetchData(selectedMonth);
    }
    function updateCharts(data,selectedMonth) {
                // 更新折线图
                const optionOne = {
                            title: {
                                text: selectedMonth + ' 月份气温统计',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                   // 设置图例位置
                            right: '20%',  // 距离右侧10%的位置
                            top: '4%',   // 距离顶部5%的位置
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {
                                        yAxisIndex: 'none'
                                    },
                                    dataView: { readOnly: false },
                                    magicType: { type: ['line', 'bar'] },
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: data.xData
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} °C'
                                }
                            },
                            series: [
                                {
                                    name: '平均高温',
                                    type: 'line',
                                    data: data.y1Data.map((value) => parseFloat(value)),
                                    markPoint: {
                                        data: [
                                            { type: 'max', name: 'Max' },
                                            { type: 'min', name: 'Min' }
                                        ]
                                    },
                                    markLine: {
                                        data: [{ type: 'average', name: 'Avg' }]
                                    }
                                },
                                {
                                    name: '平均低温',
                                    type: 'line',
                                    data: data.y2Data.map((value) => parseFloat(value)),
                                    markPoint: {
                                        data: [
                                            { type: 'max', name: 'Max' },
                                            { type: 'min', name: 'Min' }
                                        ]
                                    },
                                    markLine: {
                                        data: [{ type: 'average', name: 'Avg' }]
                                    }
                                }
                            ]
                        };

                chartOne.setOption(optionOne);

                // 更新柱状图
                const optionTwo = {
                     title: {
                                text: selectedMonth + ' 月极端高温统计',
                                left: 'center',
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                 // 设置图例位置
                            right: '20%',  // 距离右侧10%的位置
                            top: '4%',   // 距离顶部5%的位置
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {
                                        yAxisIndex: 'none'
                                    },
                                    dataView: { readOnly: false },
                                    magicType: { type: ['line', 'bar'] },
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: data.xCityData
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} °C'
                                }
                            },
                            series: [
                                {
                                    name: '极端高温',
                                    type: 'line',
                                    data: data.y1MaxData.map((value) => parseFloat(value)),
                                    markPoint: {
                                        data: [
                                            { type: 'max', name: 'Max' },
                                            { type: 'min', name: 'Min' }
                                        ]
                                    },
                                    markLine: {
                                        data: [{ type: 'average', name: 'Avg' }]
                                    },
                                     itemStyle: {  // 添加 itemStyle 属性
                                        color: '#FF8400'  // 设置折线颜色为黄色
                                    }
                                }
                            ]
                        };

                chartTwo.setOption(optionTwo);
                const optionThree = {
                     title: {
                                text: selectedMonth + ' 月极端低温统计',
                                left: 'center',
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                 // 设置图例位置
                            right: '20%',  // 距离右侧10%的位置
                            top: '4%',   // 距离顶部5%的位置
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    dataZoom: {
                                        yAxisIndex: 'none'
                                    },
                                    dataView: { readOnly: false },
                                    magicType: { type: ['line', 'bar'] },
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: data.xCityData
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: '{value} °C'
                                }
                            },
                            series: [
                                {
                                    name: '极端低温',
                                    type: 'line',
                                    data: data.y2MinData.map((value) => parseFloat(value)),
                                    markPoint: {
                                        data: [
                                            { type: 'max', name: 'Max' },
                                            { type: 'min', name: 'Min' }
                                        ]
                                    },
                                    markLine: {
                                        data: [{ type: 'average', name: 'Avg' }]
                                    },
                                     itemStyle: {  // 添加 itemStyle 属性
                                        color: '#00D6E1'  // 设置折线颜色为黄色
                                    }
                                }
                            ]
                        };

                chartThree.setOption(optionThree);
    }
    
</script>
</body>

</html>